我們在之前的章節可以看到，HTML 的發展過程代表著網際網路的變革歷史。從早期正式發布的 2.0 版本開始，W3C 持續在推動使 HTML 持續滿足市場需求。在 2000 年代初期，HTML 4.01 和我們未探討的 XHTML 1.0 的發布，奠定了現代網頁的基礎架構。而隨著時間推移，Web 2.0 強調動態往夜以及使用者在網路上的互動。有鑑於此，包含種種原因，讓 W3C 與 WHATWG 摧生了 HTML5 的發行。
HTML5 是在 Web 標準的演進過程中誕生的，而這個過程本身充滿了各種競爭和協作。從 1990 年代開始，HTML 的發展逐步受到兩個主要勢力的影響：W3C（World Wide Web Consortium）和 WHATWG（Web Hypertext Application Technology Working Group）。
當時，W3C 作為主導 HTML 的組織，在發行 HTML 4.0 之後，就開始思考要用更加嚴格的 XHTML。而 XHTML 是基於結構相對嚴謹的 XML 撰寫的，這搞得習慣 HTML4 的網頁工程師來說根本是綁手綁腳，要過渡到 XHTML 也不是簡單的事情。
雖然 XHTML 1.0 仍有一些支持者，但多數網頁工程師認為這種過於嚴謹的規範難以讓網頁開發維持高自由度；而在 W3C 推動 XHTML 2.0 時，網頁工程師發現這版本竟然不支援 HTML4 了，代表他們的網頁要直接砍掉重練，根本不相容阿～想當然而就直接被抵制了。如果我們要用當年的 XHTML 2.0 來寫一個表單，內容如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XHTML 2.0 Form Example</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit" method="post">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required="required" />
<br /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required="required" />
<br /><br />
<button type="submit">Submit</button>
</form>
</body>
</html>
這時一群來自 Mozilla、Opera 和 Apple 的技術人員直接反對 XHTML 2.0 的發怖，認為網頁標準應該符合現實需求，而非用更高層次的技術規範加以扼殺創新的可能性，因此他們就在 2004 年成立 WHATWG，目標是推動應用導向的網頁標準架構，就是我們現在在用的 HTML5 囉。
具體上如何實踐呢？WHATWG 為了避免出現換版本就不相容的狀況發生，他們將 HTML5 的規範設計到可以兼容 HTML4，讓他們可以逐漸過度到 HTML5 而不需要重新開發，這樣這些業主就可以省下大量的開發成本，因此迅速得到廣泛支持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Form Example</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit" method="post">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
<br> 或 <input> 不需要自行閉合。HTML5 不用嚴格遵守 XML 的規則。<input> 和 <br /> 都要用自閉合語法，才符合 XML 規則。required 不用明確給值，直接寫 required 就行，瀏覽器會自動認定為 True。required="required"，就算是 Boolean 屬性也一樣。<!DOCTYPE html> 超簡單，現代 HTML 文件只要這樣宣告就可以了。<!DOCTYPE> 的定義比較複雜，還要指定 DTD（Document Type Definition）。<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">，而且要用 XML 的語法標準，比如用 xml:lang 而不是 HTML5 的 lang。在 WHATWG 於 2008 年推出 HTML5 規範初期，他們與 W3C 之間還是在競爭的，但因為 W3C 的 XHTML 2.0 發展不如預期，且他們發現趨於流行的 HTML5 才是未來，也只能與 WHATWG 開始合作。因此在 2009 年，W3C 停止開發 XHTML 2.0，轉向跟 WHATWG 一起推動 HTML5 。最後在 2014 年，HTML5 正式成為 W3C 的標準，並由 WHATWG 繼續維護所謂 “Living Standard”，這待會會在後續中提到。
在 2007 年，Apple 開發的初代 iPhone 橫空出世，上市一小時不到就直接賣到缺貨，直接開創智慧型手機的年代。畢竟手機開始強調「上網」這件事情，讓網頁工程師開始思考「如何讓網頁在智慧型手機上流暢運作？」因為當時的網頁完全都是基於寬螢幕電腦進行設計的，而不是長螢幕的手機，想想你要在手機螢幕上直接看電腦版的 Facebook，眼睛不花掉才怪。
而當時的電腦版網站主流使用 Adobe Flash 呈現多媒體的內容，但畢竟 Flash 是設計給滑鼠點擊的，而不是用手指觸控；再來就是上一篇提到的安全性問題與各種不穩定狀況，因此 Apple 公司執行長 Steve Jobs 就曾經在 2010 年在《Thoughts on Flash》的公開信中批評 Flash 已經過氣了，並表態 Apple 將不支援 Flash。
蘋果的這個決定直接影響到 HTML5 發展，畢竟初代 iPhone 可是有 600 萬個使用者阿，是相當高的使用群體；其二是因為當時 Flash 一直是網頁呈現多媒體的主流技術，而 HTML5 的 <video> 和 <audio> 標記也剛好是在這時候推出，基本上 Flash Player 就可以直接棄用了。當時的 YouTube 和 Vimeo 等網頁都是採用 HTML5 的架構。
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
除了蘋果，Google 也在 2008 年推出了 Chrome 瀏覽器，除了支援 HTML5 的標準規範外，還開發了許多以 HTML5 技術為基底的即時互動的 Web App，例如 Google Docs 和 Google Maps 等，當時他們並沒有使用外掛套件處理多媒體的內容以及大數據運算，例如 Google Maps 能夠在不使用 Flash 的情況下即時規劃路徑（雖然在當年的規劃路徑真的很不準確就是了…），並透過動畫顯示在地圖上，這完全是透過 HTML5 的繪圖套件（如 <canvas> 標籤）和 JavaScript 的改良而達成的。
<canvas id="myCanvas" width="400" height="400"></canvas>
<!-- JavaScript Below-->
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100);
</script>
在 2014 年，HTML5 總算正式成為 W3C 的標準。在 HTML5 中新增了諸多新的標記，例如有利於SEO 和無障礙網頁設計的 <article>、<section>、<header> 等語意化標記、減少需要透過撰寫 JS 函數進行表單資料驗證的 date、email 和 number 的表單元素，這些改進都間接簡化了網頁開發的流程。
<!-- Semantic Elements -->
<article>
<header>
<h1>Title of this Article</h1>
<p>Date Issued: September 16th, 2024</p>
</header>
<section>
<p>This section demonstrated the use of Semantic Elements.</p>
</section>
</article>
<!-- Form Elements -->
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email" required>
<label for="birthdate">Date of Birth: </label>
<input type="date" id="birthdate" name="birthdate" required>
<label for="age">Age: </label>
<input type="number" id="age" name="age" min="0" max="120" required>
<input type="submit" value="Submit">
</form>
HTML5 的一個重要應用領域就是利用 <canvas> ****元素進行遊戲開發。在 2000 左右，當時台灣最流行的史萊母好玩遊戲區，就是一堆 Flash 遊戲組成遊戲平台（所以這根本就是一個大毒窟，當年開楓之谷都會莫名其妙被盜帳號）。而在 HTML5 發行之後，我們熟知最為經典的 《Angry Birds》 就是基於 HTML5 架構開發的，相比於史萊母好玩遊戲區的遊戲，可以想像 HTML5 有多強悍了。若我們再加上 WebGL（HTML5 架構的 3D 渲染 API）和 Web Audio API，網頁工程師就可以直接製作 3D 遊戲並進行音效處理，就也完全不需要再透過 Flash Player 外掛了。
1994 年由 Netscape 公司開發用來儲存使用者資料的方式，就是透過 Cookie（英國人不會在這說 Biscuit）。而當時 Cookie 有 4KB 的容量限制，可以想像隨著網路使用者越來越多，且除存的資料量越來越大，Cookie 逐漸不堪負荷。尤其是對於 Facebook 與 Amazon 等網站來說，Cookie 的容量限制、資料庫與伺服器交換資料都在頻繁使用 Cookie 的潛在安全性問題、以及因此影響到的運作性能，都讓大規模處理使用者資料變得尤為困難。
在 2009 年，有網頁工程師想到可以把資料直接儲存在使用者的電腦（Client）裡面，分為永久保存資料的 localStorage 以及結束 Session 後清除資料的 sessionStorage，都比起 Cookie 還要有更大的儲存空間，這樣就不需要頻繁跟伺服器交換資料在解析，就節省很多資料傳輸的時間了，這被納入了 HTML5 標準的一部分。
在 Web 1.0 和 Web 2.0 時期，Web App 資料傳輸多數是以 HTTP Request 為主（例如 AJAX Pooling 與 Long-Polling）來檢查伺服器有無回傳新資料。你可以想像一個業務在乾等客戶的訊息，導致效率非常低落。當時的 Facebook 就是使用了 AJAX Pooling 來更新訊息和通知，我們當時常常對無法即時收到通知而頗有微詞，沒辦法，當年技術就是這樣。而在 2011 年所推出的 WebSocket 的構想，是直接提供了基於 TCP 的雙向通訊的通道，讓伺服器（Server）和你的裝置（Client）可以同步交換資料，因此延遲的部份就得到很大的改善。
但要注意的是，Web Storage API 與 WebSocket API 都是同時存在的，並沒有互相衝突喔！這些在後續實做部份都會再介紹如何實做。
HTML 5.1 和 HTML 5.2 是在 HTML5 基礎上的重要改進版本，跟以往一樣，這些改善都是在解決網路發展持續遇到的問題的更新
隨著 HTML5 在 2010 年代中期，隨著手機、平板等裝置出現的爆炸性成長、響應式網頁設計（就是網頁可以知道你用什麼裝置看網頁）、以及逐漸增加的解析度（在 2012 年的頂規手機開始可以看 1080p 影片），讓網頁工程師在處理圖片、表單、以及多媒體檔案時，出現越來越多的困難。
回應式圖片 <picture> 元素：
這可以讓網頁根據不同的螢幕尺寸和支援程度，載入不同解析度的圖片，這是 RWD 中的重要部分。
<picture>
<source srcset="image-HD.jpg" media="(min-width: 800px)">
<img src="image.jpg" alt="示例圖片">
</picture>
srcset 和 sizes 屬性：被添加到 <img> 標記中，便可以根據不同的螢幕解析度與尺寸來載入對應的圖片。表單改良：
在這次改版新增的表單輸入類型，如 datetime-local、month、week 等時間參數，讓網頁工程師不再需要用 JavaScript 實做這些功能。
<form>
<label for="meeting-time">Select your date of bitrh: </label>
<input type="datetime-local" id="date-of-birth" name="date-of-birth" required>
<br><br>
<label for="birth-month">Choose your month of birth: </label>
<input type="month" id="birth-month" name="birth-month" required>
<br><br>
<label for="week">Choose the week: </label>
<input type="week" id="week" name="week" required>
<br><br>
<input type="submit" value="Submit">
</form>
download 屬性：
HTML 5.1 為 <a> 標籤加入了 download 屬性，這樣使用者在下載檔案時，就可以自己設定檔案名稱。
<a href="HTML5.pdf" download="HTML5.pdf">Download the guideline of HTML5.</a>
地理定位與即時通訊：
繼 HTML5 引入的 Geolocation API 和 WebSocket API 後，HTML 5.1 繼續在這些 API 基礎上進行擴展，以提升即時性和互動性的應用支持，滿足網路遊戲、實時聊天和地理位置相關應用的需求。
HTML 5.2 是 W3C 對 HTML 5.1 的改良版本，在 2017 年 12 月發布，重點在於安全性與無障礙使用。這時的網路生態系統中，對隱私和保護使用者的意識開始逐漸抬頭。此外 HTML 5.2 也同時提升網頁的支付功能。
Payment Request API：
這是 HTML 5.2 加入的重大功能之一，讓網站可以透過瀏覽器內建儲存交易資料的功能，透過 Auto-fill 讓使用者可以免於重複填寫固定資料，只需要記得信用卡的末三碼（CVC）即可。想像你不會希望出門在外，要在火車上拿出信用卡輸入資料吧？你會擔心旁邊的人跟你一起紀錄你的信用卡資料，這樣就尷尬了～
var request = new PaymentRequest(methodData, details, options);
request.show().then(function(paymentResponse) {
// Payment Handler Function
});
Content Security Policy（CSP，內容安全政策）更新
隨著網頁應用層面越來越廣，安全性問題就逐漸浮上檯面成為網頁工程師和使用者在意的焦點。而 CSP 就是專門用來防止常見資安攻擊的 Web 安全標準，特別是跨網站腳本攻擊（XSS）和程式碼的注入式攻擊。
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:;">
這樣做就可以避免你的網站被執行來自其他網頁的 JavaScipt 或其他腳本檔案了。
Accessible Rich Internet Applications（ARIA，無障礙性與支援度改善）
ARIA（無障礙網頁應用）透過在網頁元素中加入特殊標記，協助輔助科技（例如螢幕閱讀器）就能更精確地解讀和呈現網頁內容。這項技術對視障或其他身心障礙使用者來說特別重要，因為它能為網頁元素賦予更豐富的語意資訊，讓使用者在瀏覽網頁時能夠更清楚地理解內容，減少混淆和困擾。
**<nav aria-label="Main Navigation">**
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
在這個例子中，aria-label="Main Navigation" 屬性告訴螢幕閱讀器這是一個主導覽區域。這樣身心障礙者在使用螢幕閱讀器瀏覽網頁時，就能清楚地透過閱讀器知道這個部分的功能。
HTML 5.2 進一步強化了 ARIA 的功能，讓網頁工程師能更自由地定義頁面元素的語意，同時對複雜的 Web App 提供更多的無障礙存取設計。舉例來說，對於動態生成的內容（像是互動視窗、下拉選單等），網頁工程師可以使用 ARIA 的 role 屬性來告知輔助技術，關於這些元素的用途和狀態。
<div role="dialog" aria-labelledby="dialog-title" aria-hidden="true">
<h2 id="dialog-title">Dialog Title</h2>
<p>Content inside the dialog.</p>
</div>
HTML 5.1 和 5.2 的發展充分展現出 W3C 和 WHATWG 在推動網路標準時的務實態度，以及對市場需求的洞察。在這個演進過程中象徵著網頁技術逐漸邁向成熟，HTML 已不再僅是靜態頁面的標記語言，而是轉變成一個強大且多功能的平台。從 HTML 2 到現在版本的改進都在奠定網頁開發的基礎，逐步滿足現在網路使者的需求，包含各種裝置的支援性、RWD 使用者互動的即時性，以及安全性保障等面向。
HTML 自誕生以來，就一直是網頁開發的核心。從最初的簡單文件分享工具，到如今變成複雜的網路應用平台，HTML的發展過程就代表了整個網際網路技術的巨大進步。
從早期 HTML 2.0 主要用於分享文件所需的基本文字排版和超連結設計，隨後 HTML 3.2 的出現帶來表格、圖像排版和字體控制等功能。這個階段見證了HTML開始跨足商業應用領域，同時也促進了圖形化網頁的普及。
HTML 4.0 的推出是一個重大轉折點，架構上分離了 CSS 與 JavaScript，使網頁設計的程式碼可以模組化、變得更有結構，大幅提升了開發效率。此外，表單技術的進步也為電子商務和社群媒體等現代 Web App 奠定了基礎。此外，語義化標記也直接影響到 SEO 演算法呈現的搜尋結果，以及內文編排邏輯。
隨著網路應用的功能日益複雜，HTML5 應運而生解決多媒體支援、RWD、以及離線存取等多項技術挑戰。HTML5 引入的 <video> 和 <audio> 標記讓開發者可以直接嵌入影音內容，減少了對外掛程式的依賴；同時 <canvas> 和 WebGL 的加入提升了網頁的 2D 和 3D 繪圖能力，遊戲開發因此蓬勃發展；WebSocket 技術的引入則大幅改善即時傳訊的效率，讓網頁聊天與通知的呈現可以更加流暢。
最新的 HTML 5.1 和 5.2 版本進一步針對移動裝置和安全性進行了改進。HTML 5.1 導入了 <picture> 元素實現了回應式圖片、並改善了表單功能；而 HTML 5.2 則是針對網頁安全性進行強化，引入了 Content Security Policy（CSP）來防止跨站腳本攻擊事件的發生、同時也加入 Payment Request API，提升了網路交易的便利性和安全性。
綜上所述，我們從 HTML 的發展過程，可以看到網頁技術從簡單到複雜、從靜態到動態的演進過程。了解到 HTML 的發展過程，可以讓我們更加知道網路是街發展的趨勢、以及現在主流側重的咖發重點。後續我們會再基於網頁三兄弟，也就是 HTML、CSS、以及 JavaScript 之上，開始討論為何我們需要「JavaScript 網頁框架」等相關的主題。
iThome鐵人賽
看影片追技術